import {defineStore} from 'pinia'
import {computed, ref, watch} from 'vue'
import {useWindowSize} from '@vueuse/core'

export default defineStore(
    'configStore',
    () => {
      // 国际化
      const language = ref('zh')
      const languageList = ref([
        {value: 'en', label: 'English'},
        {value: 'zh', label: '简体中文'}
        // {value: 'ja', label: '日本語'}
      ])

      const filterLanguageList = computed(() => {
        return languageList.value.filter(item => item.value !== language.value)
      })
      // 是否折叠
      const isCollapse = ref(false)

      const isSideShow = ref(false)

      //是否为移动端
      const {width} = useWindowSize()
      const isMobile = computed(() => {
        return width.value < 768
      })

      watch(() => width.value, (newVal) => {
        isSideShow.value = false
      })

      // 主题
      const theme = ref('light')

      function setLanguage(data) {
        language.value = data
      }

      const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");

      function changeTheme() {
        switch (theme.value) {
          case 'light':
            document.documentElement.classList.remove('dark')
            break
          case 'dark':
            document.documentElement.classList.add('dark')
            break
          case 'system':
            if (mediaQueryList.matches) {
              document.documentElement.classList.add('dark')
            } else {
              document.documentElement.classList.remove('dark')
            }
            break
        }
      }

      const sortSwap = ref(false)

      function setSortSwap(data) {
        sortSwap.value = data
      }

      return {
        language,
        setLanguage,
        filterLanguageList,
        isCollapse,
        isMobile,
        isSideShow,
        theme, changeTheme,
        sortSwap,
        setSortSwap
      }
    },
    {
      persist: {
        paths: ['language', 'theme', 'isCollapse']
      }
    }
)
